<template>
  <div v-if="data !== null && data !== undefined">
    <div v-for="(item, key) in data" v-bind:key="key">
      <template v-if="helpertitle[key] !== undefined && showfun(key) === true">
        <template v-if="helpertype[key] === 'selectoptionlist'">
          <optionlist :contdata.sync="data" :defaultValue="data.defaultValue" />
        </template>
        <template v-else-if="helpertype[key] === 'panelist'">
          <panelist :element="data" :title="helpertitle[key]" :content="helpercontent[key]" :datalist="data.panelist" />
        </template>
        <template v-else-if="helpertype[key] === 'ruleslist'">
          <ruleslist :title="helpertitle[key]" :content="helpercontent[key]" :datalist="data.options.ruleslist" />
        </template>
        <template v-else-if="helpertype[key] === 'dynamiclist'">
          <dynamiclist :title="helpertitle[key]" :content="helpercontent[key]" :datalist="data.dynamiclist" />
        </template>
        <template v-else-if="helpertype[key] === 'layoutitemlist'">
          <Layoutitemlist :title="helpertitle[key]" :content="helpercontent[key]" :datalist="data.layoutitemlist" />
        </template>
        <template v-else-if="helpertype[key] === 'controlType'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <el-select v-model="data[key]" style="width: 100%;" size="mini" @change="controlTypeChange">
              <el-option v-for="optionitem in controlTypeList" v-bind:key="optionitem.type" :value="optionitem.type" :label="optionitem.name"></el-option>
            </el-select>
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'columnslist'">
          <gridcolumns :title="helpertitle[key]" :content="helpercontent[key]" :widgetdata="data" />
        </template>
        <template v-else-if="helpertype[key] === 'select'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <el-select v-model="data[key]" style="width: 100%;" size="mini">
              <el-option v-for="optionitem in helperdatalist[key]" v-bind:key="optionitem.value" :value="optionitem.value" :label="optionitem.label"></el-option>
            </el-select>
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'icon'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <iconedit :value.sync="data[key]"></iconedit>
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'number'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <el-input v-model.number="data[key]" type="number" size="small" :placeholder="helpercontent[key]" />
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'switch'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <a-switch size="small" v-model="data[key]" />
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'colorpicker'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <el-color-picker v-model="data.options[key]"></el-color-picker>
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'selectSpan'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <selectslider :spannum.sync="data[key]" />
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'wherelist'">
          <propertyWhereconfig v-model="data.options[key]" :contdata="data"></propertyWhereconfig>
        </template>
        <template v-else-if="helpertype[key] === 'showField'">
          <propertyShowFiled v-model="data.options[key]" :contdata="data"></propertyShowFiled>
        </template>
        <template v-else-if="helpertype[key] === 'assignFiledList'">
          <propertyAssignFiled v-model="data.options[key]" :contdata="data"></propertyAssignFiled>
        </template>
        <template v-else-if="helpertype[key] === 'selectApi'">
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <selectapi :apicode="data[key]" methodType="1" :controlInfo="data" :controlId="data.options.controlId" :controlType="data.type" />
          </propertyitem>
        </template>
        <template v-else-if="helpertype[key] === 'buttonlist'">
          <buttonlist :title="helpertitle[key]" :content="helpercontent[key]" :datalist="data.buttons" />
        </template>
        <template v-else>
          <propertyitem :title="helpertitle[key]" :content="helpercontent[key]">
            <el-input type="text" size="small" v-model="data[key]" />
          </propertyitem>
        </template>
      </template>
      <div v-if="key === 'options'">
        <div v-for="(item, itemkey) in data.options" v-bind:key="itemkey">
          <template v-if="
              helpertitle[itemkey] !== undefined &&
                showfun(itemkey, key) === true
            ">
            <template v-if="helpertype[itemkey] === 'selectoptionlist'">
              <optionlist :contdata="data" :defaultValue="data.options.defaultValue" />
            </template>
            <template v-else-if="helpertype[itemkey] === 'panelist'">
              <panelist :element="data" :title="helpertitle[itemkey]" :content="helpercontent[itemkey]" :datalist="data.options.panelist" />
            </template>
            <template v-else-if="helpertype[itemkey] === 'ruleslist'">
              <ruleslist :title="helpertitle[itemkey]" :content="helpercontent[itemkey]" :datalist="data.options.ruleslist" />
            </template>
            <template v-else-if="helpertype[itemkey] === 'dynamiclist'">
              <dynamiclist :title="helpertitle[itemkey]" :content="helpercontent[itemkey]" :datalist="data.options.dynamiclist" />
            </template>
            <template v-else-if="helpertype[itemkey] === 'layoutitemlist'">
              <Layoutitemlist :title="helpertitle[itemkey]" :content="helpercontent[itemkey]" :datalist="data.options.layoutitemlist" />
            </template>
            <template v-else-if="helpertype[itemkey] === 'columnslist'">
              <gridcolumns :title="helpertitle[itemkey]" :content="helpercontent[itemkey]" :widgetdata="data" ref="gridcolumnmodel" />
            </template>
            <template v-else-if="helpertype[itemkey] === 'selectSpan'">
              <propertyitem :title="helpertitle[itemkey]" :content="helpercontent[itemkey]">
                <selectslider :spannum.sync="data.options[itemkey]" />
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'select'">
              <propertyitem :title="helpertitle[itemkey]" :content="helpercontent[itemkey]">
                <el-select v-model="data.options[itemkey]" style="width: 100%;" size="mini">
                  <el-option v-for="optionitem in helperdatalist[itemkey]" v-bind:key="optionitem.value" :value="optionitem.value" :label="optionitem.label"></el-option>
                </el-select>
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'icon'">
              <propertyitem :title="helpertitle[itemkey]" :content="helpercontent[itemkey]">
                <iconedit :value.sync="data.options[itemkey]"></iconedit>
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'number'">
              <propertyitem :title="helpertitle[itemkey]" :content="helpercontent[itemkey]">
                <el-input v-model.number="data.options[itemkey]" type="number" size="small" :placeholder="helpercontent[itemkey]" />
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'switch'">
              <propertyitem :title="helpertitle[itemkey]" :content="helpercontent[itemkey]">
                <a-switch size="small" v-model="data.options[itemkey]" />
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'colorpicker'">
              <propertyitem :title="helpertitle[itemkey]" :content="helpercontent[itemkey]">
                <el-color-picker v-model="data.options[itemkey]"></el-color-picker>
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'wherelist'">
              <propertyWhereconfig v-model="data.options[itemkey]" :contdata="data"></propertyWhereconfig>
            </template>
            <template v-else-if="helpertype[itemkey] === 'showField'">
              <propertyShowFiled v-model="data.options[itemkey]" :contdata="data" :sourceApi="data.options.sourceApi"></propertyShowFiled>
            </template>
            <template v-else-if="helpertype[itemkey] === 'assignFiledList'">
              <propertyAssignFiled v-model="data.options[itemkey]" :contdata="data"></propertyAssignFiled>
            </template>
            <template v-else-if="helpertype[itemkey] === 'selectApi'">
              <propertyitem :title="helpertitle[itemkey]" :content="helpercontent[itemkey]">
                <selectapi :apicode.sync="data.options[itemkey]" methodType="1" :sourceApiId="data.options.sourceApiId" :controlInfo="data" :controlId="data.options.controlId" :controlType="data.type" @confirmSelect="confirmSelect" />
              </propertyitem>
            </template>
            <template v-else-if="helpertype[itemkey] === 'buttonlist'">
              <buttonlist :title="helpertitle[itemkey]" :content="helpercontent[itemkey]" :datalist="data.options.buttons" />
            </template>
            <template v-else>
              <propertyitem :title="helpertitle[itemkey]" :content="helpercontent[itemkey]">
                <propertyitemvalue :helpertype="helpertype[itemkey]" :contentval.sync="data.options[itemkey]"></propertyitemvalue>
              </propertyitem>
            </template>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { helper } from '@/components/formdesign/propertyhelpConfig.js'
import propertyitem from '@/components/formdesign/propertyitem.vue'
import buttonlist from '@/components/formdesign/buttonlist.vue'
import optionlist from '@/components/formdesign/optionlist.vue'
import Layoutitemlist from '@/components/formdesign/Layoutitemlist.vue'
import gridcolumns from '@/components/formdesign/gridcolumnslist.vue'
import panelist from '@/components/formdesign/panelist.vue'
import dynamiclist from '@/components/formdesign/dynamiclist.vue'
import selectapi from '@/components/formdesign/selectapi.vue'
import iconedit from '@/components/formdesign/iconedit.vue'
import selectslider from '@/components/formdesign/selectslider.vue'
import ruleslist from '@/components/formdesign/ruleslist.vue'
import propertyitemvalue from '@/components/formdesign/propertyitemvalue.vue'
import propertyWhereconfig from '@/components/formdesign/propertyWhereconfig.vue'
import propertyAssignFiled from '@/components/formdesign/propertyAssignFiled.vue'
import propertyShowFiled from '@/components/formdesign/propertyShowFiled.vue'
import {
  basicComponents,
  platformComponents
} from '@/components/formdesign/controlconfig.js'
export default {
  props: ['data', 'select'],
  data () {
    return {
      helperdata: helper,
      helpertitle: null,
      helpercontent: null,
      helpertype: null,
      helperdatalist: null,
      helpershowfun: null,
      controlTypeList: [],
      controlType: [],
      fromInfo: this.changeFromInfo()
    }
  },
  components: {
    propertyitem,
    buttonlist,
    optionlist,
    Layoutitemlist,
    gridcolumns,
    panelist,
    dynamiclist,
    selectapi,
    iconedit,
    selectslider,
    ruleslist,
    propertyitemvalue,
    propertyWhereconfig,
    propertyAssignFiled,
    propertyShowFiled
  },
  methods: {
    buttonEdit (data) {
      this.data = data
      this.selectWidget = data
      this.$emit('update:select', data)
    },
    showfun (itemkey, key) {
      if (this.helpershowfun[itemkey] === undefined) {
        return true
      }
      return this.helpershowfun[itemkey](this.fromInfo, this.data, key)
    },
    controlTypeChange (val) {
      const controlObject = this.controlType.filter(item => {
        return item.type.indexOf(val.trim()) >= 0
      })
      const filed = this.data.options.filed
      const newcontrolObject = JSON.parse(JSON.stringify(controlObject[0]))
      this.data = Object.assign(this.data, newcontrolObject)
      this.data.options.filed = filed
      this.selectWidget = this.data
      this.$emit('update:select', this.data)
    },
    confirmSelect () {
      this.$refs.gridcolumnmodel[0].loadfiled()
    }
  },
  created () {
    this.helpertitle = {}
    this.helpercontent = {}
    this.helpertype = {}
    this.helperdatalist = {}
    this.helpershowfun = {}
    for (const key in this.helperdata) {
      this.helpertitle[key] = this.helperdata[key].title
      this.helpercontent[key] = this.helperdata[key].content
      if (this.helperdata[key].type !== undefined) {
        this.helpertype[key] = this.helperdata[key].type
      }
      if (this.helperdata[key].data !== undefined) {
        this.helperdatalist[key] = this.helperdata[key].data
      }
      if (this.helperdata[key].showfun !== undefined) {
        this.helpershowfun[key] = this.helperdata[key].showfun
      }
    }
    this.controlTypeList = []
    this.controlType = []
    for (let idex = 0; idex < basicComponents.length; idex++) {
      if (basicComponents[idex].dragType === 'control') {
        this.controlTypeList.push({
          name: basicComponents[idex].name,
          index: idex,
          type: basicComponents[idex].type
        })
        this.controlType.push(basicComponents[idex])
      }
    }
    for (let idex = 0; idex < platformComponents.length; idex++) {
      if (platformComponents[idex].dragType === 'control') {
        this.controlTypeList.push({
          name: platformComponents[idex].name,
          index: idex,
          type: platformComponents[idex].type
        })
        this.controlType.push(platformComponents[idex])
      }
    }
  },
  computed: {
    SetChangeFromInfo () {
      return this.changeFromInfo()
    }
  },
  watch: {
    SetChangeFromInfo (val) {
      this.fromInfo = val
    }
  },
  inject: ['changeFromInfo']
}
</script>
